<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/font-awesome.css">
  <link rel="stylesheet" href="./lib/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="./css/article-add.css">
  <script src="./lib/wangEditor.js"></script>
</head>

<body>

  <!-- form表单 -->
  <form class="layui-form" id="tpl_info">

    <div class="layui-tab ">
      <ul class="layui-tab-title ">
        <li>基础信息</li>
        <li>SEO</li>
        <li>文章内容</li>
      </ul>

      <div class="layui-tab-content">
        <!-- 基础信息 -->
        <div class="layui-tab-item layui-show">
          <div class="layui-form-item layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block ">
              <input type="text" name="title" lay-verify="required" placeholder="请输入标题名称" autocomplete="off"
                class="layui-input">
            </div>
          </div>

          <div class="layui-row">
            <div class="layui-form-item layui-inline">
              <label class="layui-form-label">作者</label>
              <div class="layui-input-block">
                <input type="text" name="author" lay-verify="required" placeholder="请输入作者" autocomplete="off"
                  class="layui-input">
              </div>
            </div>

            <div class="layui-form-item layui-inline">
              <label class="layui-form-label">分类</label>
              <div class="layui-input-block">
                <select name="cateid" id="cateall">

                </select>
              </div>
            </div>


            <div class="layui-row">
              <div class="layui-form-item layui-inline">
                <label class="layui-form-label">阅读次数</label>
                <div class="layui-input-block">
                  <div id="kuai">
                    <button type="button" class="layui-btn" id="btn_cut">-</button>
                    <input type="text" name="title" value="10" id="ipt_value">
                    <button type="button" class="layui-btn" id="btn_add">+</button>
                  </div>
                </div>
              </div>

              <div class="layui-form-item layui-inline ">
                <label class="layui-form-label">创建时间</label>
                <input type="text" class="layui-input" id="test1" placeholder="请选择时间">
              </div>

            </div>

            <div class="layui-row">
              <div class="layui-form-item layui-inline">
                <label class="layui-form-label">是否推荐</label>
                <input type="checkbox" name="ishot" lay-skin="switch" lay-text="是|否" lay-filter="ishot" checked>
              </div>

              <div class="layui-form-item layui-inline">
                <label class="layui-form-label">是否置顶</label>
                <input type="checkbox" name="istop" lay-skin="switch" lay-text="是|否" lay-filter="istop">
              </div>
            </div>
            <!-- 4 -->
            <div class="layui-form-item layui-inline">
              <label class="layui-form-label">收藏数量</label>
              <div class="layui-input-block">
                <input type="text" name="lovenum" lay-verify="required" placeholder="请输入收藏数量名称" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <!-- 5 -->
            <div class="layui-form-item ">
              <label class="layui-form-label">文章缩略图</label>
              <div class="layui-input-block">
                <!-- 隐藏的文件选择框 -->
                <input type="file" id="fileCover" style="display: none;" accept="image/png,image/jpeg,image/gif" />
                <button type="button" class="layui-btn layui-bg-blue" id="btnChooseCoverImage">点击上传</button>
              </div>
            </div>
            <!-- 图片的渲染 -->

            <div class="layui-form-item ">
              <label class="layui-form-label">文章标签</label>
              <div class="layui-input-block" id="taglis" name="tags">
                <!-- 标签分类渲染 -->
                <!-- <input type="checkbox" name="" title="搞笑" lay-skin="primary"> -->
              </div>
            </div>

            <!-- 7 -->
            <div class="layui-form-item " style="text-align: center;">
              <button type="button" class="layui-btn" lay-submit lay-filter="formDemo"><i
                  class="layui-icon layui-icon-add-1" id="btnPublish"></i>
                立即发布</button>
              <button type="button" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-log"
                  id="btnSave"></i>
                保存草稿</button>
              <a href="./article.html" class="layui-btn layui-btn-warm"><i
                  class="layui-icon layui-icon-return back"></i> 返回列表</a>
            </div>

          </div>
        </div>

        <!-- SEO信息 -->
        <div class="layui-tab-item">
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">SEO关键字</label>
            <div class="layui-input-block">
              <input type="text" name="keywords" lay-verify="required" placeholder="请输入SEO关键字" autocomplete="off"
                class="layui-input keywords">

            </div>
          </div>

          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">SEO的描述</label>
            <div class="layui-input-block">
              <input type="text" name="description" lay-verify="required" placeholder="请输入SEO的描述" autocomplete="off"
                class="layui-input description">
            </div>
          </div>

          <div class="layui-form-item " style="text-align: center;">
            <button type="button" class="layui-btn" lay-submit lay-filter="formDemo"><i
                class="layui-icon layui-icon-add-1"></i>
              立即发布</button>
            <button type="button" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-log"></i>
              保存草稿</button>
            <a href="./article.html" class="layui-btn layui-btn-warm"><i
                class="layui-icon layui-icon-return back back"></i>
              返回列表</a>
          </div>



        </div>

        <!-- 文章内容 -->
        <div class="layui-tab-item">
          <div class="layui-form-item">
            <!-- 左侧的 label -->
            <label class="layui-form-label">文章内容</label>
            <!-- 为富文本编辑器外部的容器设置高度 -->
            <div class="layui-input-block" style="height: 400px; ">
              <!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
              <textarea name="content"></textarea>
            </div>
          </div>

          <div class="layui-form-item" style="text-align: center;">
            <button type="button" lay-submit lay-filter="formDemo" class="layui-btn" id="btnAdd"><i
                class="layui-icon layui-icon-add-1"></i>
              立即发布</button>
            <button type="button" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-log"></i>
              保存草稿</button>
            <a href="./article.html" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-return  back"></i>
              返回列表</a>
          </div>

        </div>

      </div>
    </div>

  </form>

  <!-- 渲染文章的分类列表 -->
  <script type="text/html" id="tpl-cateall">
        <option value="">选择文章列表分类</option>
        {{each data}}
        <option value="{{$value.id}}" name="cateid">{{$value.catename}}</option>
        {{/each}}
    </script>

  <!-- 渲染标签分类 -->
  <script type="text/html" id="tpl-taglis">
        {{each data}}
        <input type="checkbox" name="tags" title="{{$value.tagname}}" lay-skin="primary"> {{/each}}
    </script>
  <!-- layui  -->
  <script src="./lib/layui/layui.all.js" charset=" utf-8 "></script>
  <!-- jquery  -->
  <script src="./js/jquery.min.js"></script>
  <!-- baseApi -->
  <script src="./js/baseAPI.js"></script>
  <!-- 模板引擎 -->
  <script src="./lib/layui/lay/modules/template-web.js"></script>
  <!-- 富文本js -->
  <script src="./lib/layui/lay/modules/tinymce.min.js"></script>
  <script src="./lib/layui/lay/modules/tinymce_setup.js"></script>
  <!-- 自己的js -->
  <script src="./js/article.js"></script>
</body>
<script>
  const layer = layui.layer
  axios.post('/ydd_article/update').then(({ data: { data } }) => {
    const htmlStr = data.map(({ name, alias }) => {
      return `
          <tr>
            <td>${name}</td>
            <td>${alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
            </td>
          </tr>
    `
    }).join('')
    $('#tbody').html(htmlStr)
  })

  $('#btnAddCate').on('click', function () {
    layer.open({
      start_time: '',
      end_time: '',
      title: '',
      page: 1,
      limit: 10,
      cateid: ''
    })
  })
  //初始化富文本编辑器
  const E = window.wangEditor
  const editor = new E("#contentBox")
  // 或者 const editor = new E(document.getElementById('div1'))
  editor.config.zIndex = 1;
  editor.create()

  let state;
  $("#btnPublish").on("click", function () {
    state = '已发布'
  })
  $("#btnSave").on("click", function () {
    state = '草稿'
  })

  $("#btnChooseCoverImage").on('click', function () {
    $("#fileCover").click()
  })
</script>

</html>